<template>
  <div id="addReturnVisit">

    <!-- 就诊时间选择 -->
    <div class='mc' v-show='isTime' @click.stop='toggle(0)'></div>
    <div class='datetime'>
      <div class='top'>
        <a @click.stop='toggle(0)'>取消</a>
        <a @click.stop='sureTime'>确定</a>
      </div>
      <mt-picker :slots="slotsTime" @change="onValuesChangeTime"></mt-picker>
    </div>
    <!-- 回访状态选择 -->
    <div class="applicable-container" @click="choseApp(-1)" v-show='showTip'>
      <div class="app-content">
        <ul class="item-nav">
          <li v-for="(item,index) in dataList" @click.stop="choseApp(index)">
            {{item}}
          </li>
        </ul>
        <div class="cancle" @click="choseApp(-1)">取消</div>
      </div>
    </div>
    <header>
      <span @click="goBack()">返回</span>
      <div v-if="status=='add'">创建回访</div>
      <div v-if="status=='details'">回访详情</div>
      <div v-if="status=='edit'">编辑回访</div>
      <span @click='save' v-if="status != 'details'">保存</span>
      <span v-if="status=='details'" @click="status='edit'">编辑</span>
    </header>
    <vue-event-calendar :events="demoEvents" @day-changed="handleDayChanged" @month-changed="handleMonthChanged">
    </vue-event-calendar>
    <div class='list'>
      <ul>
        <li class='selectpatient' @click='selectpatient' :class='status=="details"?"noBack":""'>
          <img src="../../image/bg_touxiang@2x.png" width='43' height='43' alt="">
          <span>{{patientObj.name || "请选择患者"}}</span>
        </li>
      </ul>
      <ul>
        <li @click='goshowTip' :class='status=="details"?"noBack":""'>
          <span>状态</span>
          <i class='flex'>{{obj.type || '请选择回访状态'}}</i>
        </li>
      </ul>
      <ul>

        <li class='noBack'>
          <span>日期</span>
          <i>{{obj.currentDay}}</i>
        </li>
      </ul>
      <ul>
        <li @click='toggle(1)' :class='status=="details"?"noBack":""'>
          <span>时间</span>
          <!-- <i>{{obj.time || '未选择'}}</i> -->
          <i>{{valuestime || '未选择'}}</i>
        </li>

      </ul>
      <ul>
        <li class='noBack content'>
          <i>回访内容:</i>
          <textarea :placeholder="status=='details'?'暂无回访结果':'请输入回访内容'" :disabled="status=='details'" v-model='obj.content'>

                    </textarea>
        </li>
      </ul>
      <ul>
        <li class='noBack content'>
          <i>回访结果:</i>
          <textarea :placeholder="status=='details'?'暂无回访结果':'请输入回访结果'" :disabled="status=='details'" v-model='obj.result'>

                    </textarea>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
  let today = new Date()
  export default {
    data() {
      return {
        demoEvents: [], //日期可点击的日期数组
        currentWeek: '',
        id: '', //回访记录id
        status: '', //add  edit  details
        obj: {
          pid: '', //回访患者id
          doctorid: '',
          time: '', //回访日期
          type: '', //回访状态
          content: '', //回访内容
          result: '', //回访结果
          currentDay: '', //当前所选日期

        },
        patientObj: {}, //患者对象
        isTime: false, //是否显示时间选择器
        valuestime: '', //就诊时间选择但未确定时的选项
        slotsTime: [{
          flex: 1,
          values: function () {
            const hourArr = [];
            for (var i = 0; i < 24; i++) {
              if (i < 10) {
                hourArr.push('0' + i + ":00");
              } else {
                hourArr.push(i + ":00");
              }

            }
            return hourArr;
          }(),
          className: 'slot2',
          textAlign: 'center',
          defaultIndex: function () {
            const date1 = new Date(); //获取当前时间
            const date2 = new Date(date1);
            date2.setHours(date1.getHours() + 4);
            const times = date2.getHours();
            return times;
          }(),
          value: function () {
            const date1 = new Date(); //获取当前时间
            const date2 = new Date(date1);
            date2.setHours(date1.getHours() + 4);
            const times = date2.getHours() + ":" + "00";
            return times;
          }(),

        }, ],
        dataList: ['待回访', '回访完成', '未完成', '已取消'],
        showTip: false,
      }
    },
    watch: {
      obj: {
        handler(val, oldVal) {
          if (val.pid) {
            this.getPatient(val.pid);
          }

        },
        deep: true
      }
    },
    methods: {
      //把所有日期都设为可点击的
      initDate(data) {
        var date = new Date();
        this.user = JSON.parse(localStorage.getItem('type'));
        const Month = date.getMonth() + 1;
        this.obj.currentDay = date.getFullYear() + '-' + Month + '-' + date.getDate();
        var month;
        if (data) {
          month = data;
        } else {
          month = `${today.getFullYear()}/${today.getMonth() + 1}`;
        }
        for (let i = 1; i <= 31; i++) {
          const date = month + '/' + i;
          this.demoEvents.push({
            date: date
          });
        }
      },
      //日改变
      handleDayChanged(data) {
        //给选中日期添加样式
        var date = data.date.split(" ")[0].split('/');
        this.obj.currentDay = date[0] + '-' + date[1] + '-' + date[2];
        // this.obj.time = date[0] + '年' + date[1] + '月' + date[2] + '日'
      },
      //年月改变
      handleMonthChanged(data) {
        data = data.replace('年', '\/');
        data = data.replace('月', '');
        this.initDate(data);
      },
      //就诊时间
      onValuesChangeTime(picker, values) {
        this.valuestime = values.join(" ");
        const date = new Date();
        const currentDate = this.$utils.commentTime(date, 'yyyy-MM-dd hh:mm:ss');
        this.obj.time = this.obj.currentDay + ' ' + this.valuestime;

      },
      //确定就诊时间
      sureTime() {
        var date = new Date();
        const Month = date.getMonth() + 1;
        if (this.obj.currentDay < date.getFullYear() + '-' + Month + '-' + date.getDate()) {
            this.$utils._toast('只能选择今天以后的日期')
            return;

        }else if(this.obj.currentDay = date.getFullYear() + '-' + Month + '-' + date.getDate()){
            if(this.valuestime.split(":")[0]<date.getHours()+4){
                this.$utils._toast('提前三小时预约')
                return;
            }   
        }

        this.obj.time = this.obj.currentDay + ' ' + this.valuestime;
        this.toggle(0);
      },
      // 显示回访状态选择
      goshowTip() {
        if (this.status != 'details') {
          this.showTip = true;
        }
      },
      //返回上一级
      goBack() {
        // this.$router.back();
        this.$router.push({
          name: 'returnVisit'
        });
      },
      // 根据pid获取患者详情
      getPatient(pid) {
        this.$api.get(this.$api.baseURLSchool, "select_cid/patient/" + pid, {}, r => {
          if (r.data.ret == 1) {
            this.patientObj = r.data.info;
          }
        }, err => {
          console.log(err);
        })
      },
      // 判断类型 是新建还是详情还是编辑
      init() {
        if (this.$route.query.status) {
          this.status = this.$route.query.status;
        }
        if (this.$route.query.pid) {
          this.obj.pid = this.$route.query.pid;
        }
        if (this.$route.query.id) {
          this.id = this.$route.query.id;
          this.$api.get(this.$api.baseURLSchool, "select_cid/view_patient_returnvisit/" + this.id, {}, r => {
            if (r.data.ret == 1) {
              this.obj = r.data.info;
              this.valuestime=r.data.info.selecttime
            }
          }, err => {
            console.log(err);
          })
        }
      },
      //选择患者
      selectpatient() {
        if (this.status != 'details') {
          this.$router.push({
            name: 'selectpatient',
            query: {
              from: 'addReturnVisit',
              status: this.status
            }
          });
        }

      },
      // 控制日期选择器显示隐藏动画
      toggle(status) { //status 0隐藏 1显示
        if (this.status != 'details') {
          if (status) {
            this.isTime = true;
            $(".datetime").addClass("up").removeClass("down");
          } else {
            $(".datetime").addClass("down").removeClass("up");
            this.isTime = false;
          }
        }
      },


      //回访状态选择
      choseApp(index) {
        if (index == 0) {
          this.obj.type = '待回访';
        } else if (index == 1) {
          this.obj.type = '回访完成';
        } else if (index == 2) {
          this.obj.type = '未完成';
        } else if (index == 3) {
          this.obj.type = '已取消';
        }
        this.showTip = false;
      },
      //保存回访
      save() {
        this.obj.doctorid = localStorage.getItem("loginMobile");
        this.obj.currentDay=this.obj.currentDay;
        this.obj.selecttime=this.valuestime;
        if (!this.obj.pid) {
          this.$utils._toast("请选择患者");
          return false;
        } else if (!this.obj.time) {
          this.$utils._toast("请选择日期");
          return false;
        } else if (!this.obj.type) {
          this.$utils._toast("请选择回访状态");
          return false;
        } else if (!this.obj.content) {
          this.$utils._toast("请输入回访内容");
          return false;
        } else if (!this.obj.result) {
          this.$utils._toast("请输入回访结果");
          return false;
        } else {
          if (this.status == "add") {
            this.$api.post(this.$api.baseURLSchool, "updatedata/returnvisit/add", this.obj, r => {
              if (r.data.ret == 1) {
                this.$utils._toast("保存成功");
                setTimeout(() => {
                  this.goBack();
                }, 300);
              }
            }, err => {
              console.log(err);
            })
          } else if (this.status == "edit") {
            this.$api.post(this.$api.baseURLSchool, "updatedata/returnvisit/edit", this.obj, r => {
              if (r.data.ret == 1) {
                this.$utils._toast("保存成功");
                setTimeout(() => {
                  this.goBack();
                }, 300);
              }
            }, err => {
              console.log(err);
            })
          }
        }


      }
    },
    created() {
      this.init();
      this.initDate();

    }
  }

</script>
<style lang="scss" scoped>

</style>
